<template>
  <Card :bordered="false" dis-hover class="ivu-mt">
    <Row>
      <Col>
        <Button
          type="primary"
          v-hasC="{
            name: 'v1-rbac-manage-group-update-manage-group',
            flag: 'v1/rbac/manage-group/update-manage-group',
          }"
          @click="handleAdd"
          >新增</Button
        >
      </Col>
    </Row>
    <Table
      :columns="columns"
      :data="data"
      :loading="loading"
      class="ivu-mt-16"
      :max-height="650"
    >
      <template slot="member_arr" slot-scope="{ row }">
        <Tag type="border" v-for="item in row.member_arr" :key="item.id">
          {{ item.realname }}
        </Tag>
      </template>
      <template slot="role_arr" slot-scope="{ row }">
        <Tag type="border" v-for="item in row.role_arr" :key="item">
          {{ item }}
        </Tag>
      </template>
      <template slot="status" slot-scope="{ row }">
        <Badge
          :status="row.status == '1' ? 'success' : 'error'"
          :text="row.status_name"
        />
      </template>

      <template slot="url" slot-scope="{ row }">
        <a :href="row.url">{{ row.url }}</a>
      </template>
      <template slot="action" slot-scope="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-rbac-manage-group-update-manage-group2',
            flag: 'v1/rbac/manage-group/update-manage-group',
          }"
          >编辑</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-rbac-manage-group-update-manage-group2',
            flag: 'v1/rbac/manage-group/update-manage-group',
          }"
        />
        <a
          @click="handleSet(row)"
          v-hasC="{
            name: 'v1-rbac-manage-group-update-member-relations-group',
            flag: 'v1/rbac/manage-group/update-member-relations-group',
          }"
          >人员配置</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-rbac-manage-group-update-member-relations-group',
            flag: 'v1/rbac/manage-group/update-member-relations-group',
          }"
        />
        <a
          @click="handleDel(row)"
          v-hasC="{
            name: 'v1-rbac-manage-group-delete-manage-group',
            flag: 'v1/rbac/manage-group/delete-manage-group',
          }"
          class="del"
          >删除</a
        >
      </template>
    </Table>

    <Page
      :total="total"
      class="ivu-mt-16"
      :modelValue="params.page"
      :page-size="params.pageSize"
      @on-change="changePage"
      show-total
      show-elevator
      show-sizer
      @on-page-size-change="changePageSize"
    />

    <Modal
      v-model="showForm"
      :title="isEdit ? '编辑' : '新增'"
      :draggable="true"
      :mask-closable="false"
      @on-cancel="handleCancel"
      footer-hide
    >
      <Form
        :model="formItem"
        :label-width="80"
        ref="formItem"
        :rules="createRules"
      >
        <FormItem label="名称" prop="name">
          <Input v-model="formItem.name" placeholder="请输入名称" />
        </FormItem>
        <FormItem label="职能" prop="competency_id">
          <Select v-model="formItem.competency_id" placeholder="请选择职能">
            <Option
              :value="+item.value"
              v-for="item in dutyList"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="角色" prop="role_id">
          <Select
            multiple
            filterable
            v-model="formItem.role_id"
            placeholder="请选择角色"
          >
            <Option
              :value="item.value.toString()"
              v-for="item in roleList"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="状态" prop="status">
          <i-switch v-model="formItem.status">
            <span slot="open">On</span>
            <span slot="close">Off</span>
          </i-switch>
        </FormItem>
      </Form>

      <div class="modalFoot">
        <Button @click="handleCancel()">取消</Button>
        <Button
          class="ivu-ml-16"
          :loading="btnLoading"
          type="primary"
          @click="handleSave()"
          >确定</Button
        >
      </div>
    </Modal>

    <Modal
      v-model="showSet"
      title="管理组人员配置"
      :draggable="true"
      :mask-closable="false"
      @on-cancel="handleCancelSet"
      footer-hide
    >
      <Form :model="setItem" :label-width="0" ref="setItem">
        <FormItem label="" prop="member_id">
          <Select
            v-model="setItem.member_id"
            filterable
            multiple
            placeholder="请选择人员"
          >
            <Option
              :value="+item.value"
              v-for="item in memberList"
              :key="item.value"
              >{{ item.label }}({{ item.mobile }})</Option
            >
          </Select>
        </FormItem>
      </Form>
      <div class="modalFoot">
        <Button @click="handleCancelSet()">取消</Button>
        <Button
          class="ivu-ml-16"
          :loading="btnLoading"
          type="primary"
          @click="handleSaveSet()"
          >确定</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import {
  manageGroupList,
  manageGroupDel,
  manageGroupEdit,
  manageGroupSet,
} from "@/api/TApi/index.js";
export default {
  name: "managegroups",
  data() {
    return {
      loading: false,
      showForm: false,
      showSet: false,
      columns: [
        {
          title: "名称",
          key: "name",
          width: 130,
        },
        {
          title: "人员",
          slot: "member_arr",
          minWidth: 200,
        },
        {
          title: "角色",
          slot: "role_arr",
          minWidth: 150,
        },
        {
          title: "职能",
          key: "competency_name",
          width: 150,
        },
        {
          title: "状态",
          slot: "status",
          width: 100,
        },
        {
          title: "创建日期",
          key: "created_at_str",
          width: 120,
        },

        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 190,
        },
      ],
      data: [],
      total: 0,
      params: {
        page: 1,
        pageSize: 10,
      },
      isEdit: false,
      dutyList: [],
      roleList: [],
      btnLoading: false,
      formItem: {
        name: "",
        competency_id: "",
        role_id: [],
        status: true,
      },
      createRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        competency_id: [
          {
            required: true,
            type: "number",
            message: "请选择职能",
            trigger: "change",
          },
        ],
        role_id: [
          {
            required: true,
            type: "array",
            message: "请选择角色",
            trigger: "change",
          },
        ],
      },
      memberList: [],
      setItem: {
        group_id: null,
        member_id: [],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      manageGroupList(this.params)
        .then((res) => {
          this.total = res.total;
          this.data = res.list;
          this.dutyList = res.condition.competency_arr;
          this.roleList = res.condition.role_arr;
          this.memberList = res.condition.member_arr;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    changePage(e) {
      this.params.page = e;
      this.getData();
    },
    changePageSize(e) {
      this.params.pageSize = e;
      this.getData();
    },
    initData() {
      this.formItem = {
        name: "",
        competency_id: "",
        role_id: [],
        status: true,
      };
      this.$refs.formItem.resetFields();
    },
    handleAdd() {
      this.initData();
      this.isEdit = false;
      this.showForm = true;
    },
    handleDel(row) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删除，删除后管理组人员权限会相对应删除，请谨慎操作",
        loading: true,
        onOk: () => {
          manageGroupDel({ id: row.id })
            .then(() => {
              this.getData();
              this.$Modal.remove();
            })
            .catch(() => {
              this.$Modal.remove();
            });
        },
      });
    },
    handleEdit(row) {
      this.initData();
      this.formItem = {
        id: row.id,
        name: row.name,
        competency_id: +row.competency_id,
        role_id: row.role_id,
        status: row.status == 1 ? true : false,
      };
      this.isEdit = true;
      this.showForm = true;
    },
    handleSet(row) {
      this.setItem.member_id = row.member_arr.map((item) => {
        return +item.id;
      });
      this.setItem.group_id = row.id;
      this.showSet = true;
    },
    handleCancel() {
      this.showForm = false;
    },
    handleSave() {
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let params = {
            name: this.formItem.name,
            competency_id: this.formItem.competency_id,
            role_id: this.formItem.role_id,
            status: this.formItem.status ? 1 : 0,
          };
          if (this.isEdit) {
            params.id = this.formItem.id;
          }
          manageGroupEdit(params)
            .then((res) => {
              this.btnLoading = false;
              this.showForm = false;
              this.getData();
            })
            .catch(() => {
              this.btnLoading = false;
            });
        }
      });
    },
    handleCancelSet() {
      this.showSet = false;
    },
    handleSaveSet() {
      this.btnLoading = true;
      manageGroupSet(this.setItem)
        .then((res) => {
          this.btnLoading = false;
          this.showSet = false;
          this.getData();
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
.title {
  color: #999;
  margin-bottom: 15px;
}
</style>
